<template>
  <div class="syllabuscontainer">
    <!-- 工作台头部 -->
    <el-row class="title_workPlatform" v-if="parentData.headerType">
      <span style="font-size:0.2rem;">我的课表</span>
      <el-radio-group class="timeselect" v-model="parentData.radio" size="mini" style="top:0.13rem;" @change="changeClassType">
        <el-radio-button label="今日"></el-radio-button>
        <el-radio-button label="本周"></el-radio-button>
        <el-radio-button label="本月"></el-radio-button>
      </el-radio-group>
      <el-row class="toprow">
        <i class="el-icon-arrow-left btn" @click="changeClassTime(-1)"></i>
        <span class="timetxt">{{parentData.currentTime}}</span>
        <i class="el-icon-arrow-right btn" @click="changeClassTime(1)"></i>
      </el-row>
    </el-row>
    <!-- 教务管理头部 -->
    <el-row class="title_StudentManage" v-else>
      <el-row class="toprow">
        <i class="el-icon-arrow-left btn" @click="changeClassTime(-1)"></i>
        <span class="timetxt">{{parentData.currentTime}}</span>
        <i class="el-icon-arrow-right btn" @click="changeClassTime(1)"></i>
      </el-row>
      <el-radio-group
        class="timeselect"
        v-model="parentData.radio"
        size="medium"
        style="top:0.08rem;"
				 @change="changeClassType"
      >
        <el-radio-button label="今日"></el-radio-button>
        <el-radio-button label="本周"></el-radio-button>
        <el-radio-button label="本月"></el-radio-button>
      </el-radio-group>
    </el-row>
	<!-- 课程表显示 -->
    <div class="calendarBox" :style="'display:'+syllabusdisplay">
		<!-- 一个小时 高度 一行一小时 -->
		<div class="day" :style="'display:'+day.display" ref="dayBox">
			<!-- 背景表格 -->
			<template>
			<el-table :data="yaxisData" border class="backtable">
				<el-table-column prop="time" :width="dayWeekFirstColumWidth">
				<template slot="header" slot-scope="scope"></template>
				</el-table-column>
				<el-table-column prop="Monday"></el-table-column>
				<el-table-column prop="Tuesday"></el-table-column>
				<el-table-column prop="Wednesday"></el-table-column>
				<el-table-column prop="Thursday">
				<template slot="header" slot-scope="scope">
					<i class="el-icon-caret-bottom arrow" style="display: none;"></i>
					<span :class="'dayofweek '+day.head.select" :style="{'text-align':parentData.headerType==true?'left':'center'}">{{day.head.dayofweek}}</span>
					<span class="date" style="color:#3885f8;display: none;">{{day.head.date}}</span>
				</template>
				</el-table-column>
				<el-table-column prop="Friday"></el-table-column>
				<el-table-column prop="Saturday"></el-table-column>
				<el-table-column prop="Sunday"></el-table-column>
			</el-table>
			</template>
			<!-- 课程叠加 -->
			<div class="classLayerBox" ref="classLayerBox_day" v-html="day.classHtml" @click="showGradeDetails($event)"></div>
			<!-- 当前时间横线 -->
			<div class="timeline" ref="timeline_day">
				<i class="el-icon-caret-right"></i>
			</div>
		</div>
      	<div class="week" :style="'display:'+week.display" ref="weekBox">
			<!-- 背景表格 -->
			<template>
				<el-table :data="yaxisData" border class="backtable">
					<el-table-column prop="time" :width="dayWeekFirstColumWidth">
					<template slot="header" slot-scope="scope"></template>
					</el-table-column>
					<el-table-column prop="Monday" :width="week.tablecolumWidth">
					<template slot="header" slot-scope="scope" >
										<i :class="'el-icon-caret-bottom arrow '+week.head[0].select" ></i>
										<span :class="'dayofweek '+week.head[0].select">{{week.head[0].dayofweek}}</span>
										<span :class="'date '+week.head[0].select" >{{week.head[0].date}}</span>
					</template>
					</el-table-column>
					<el-table-column prop="Tuesday" :width="week.tablecolumWidth">
					<template slot="header" slot-scope="scope" >
										<i :class="'el-icon-caret-bottom arrow '+week.head[1].select" ></i>
										<span :class="'dayofweek '+week.head[1].select">{{week.head[1].dayofweek}}</span>
										<span :class="'date '+week.head[1].select" >{{week.head[1].date}}</span>
					</template>
					</el-table-column>
					<el-table-column prop="Wednesday" :width="week.tablecolumWidth">
					<template slot="header" slot-scope="scope" >
									<i :class="'el-icon-caret-bottom arrow '+week.head[2].select" ></i>
										<span :class="'dayofweek '+week.head[2].select">{{week.head[2].dayofweek}}</span>
										<span :class="'date '+week.head[2].select" >{{week.head[2].date}}</span>
					</template>
					</el-table-column>
					<el-table-column prop="Thursday" :width="week.tablecolumWidth">
					<template slot="header" slot-scope="scope" >
							<i :class="'el-icon-caret-bottom arrow '+week.head[3].select" ></i>
										<span :class="'dayofweek '+week.head[3].select">{{week.head[3].dayofweek}}</span>
										<span :class="'date '+week.head[3].select" >{{week.head[3].date}}</span>
					</template>
					</el-table-column>
					<el-table-column prop="Friday" :width="week.tablecolumWidth">
					<template slot="header" slot-scope="scope">
									<i :class="'el-icon-caret-bottom arrow '+week.head[4].select" ></i>
										<span :class="'dayofweek '+week.head[4].select">{{week.head[4].dayofweek}}</span>
										<span :class="'date '+week.head[4].select" >{{week.head[4].date}}</span>
					</template>
					</el-table-column>
					<el-table-column prop="Saturday" :width="week.tablecolumWidth">
					<template slot="header" slot-scope="scope">
										<i :class="'el-icon-caret-bottom arrow '+week.head[5].select" ></i>
										<span :class="'dayofweek '+week.head[5].select">{{week.head[5].dayofweek}}</span>
										<span :class="'date '+week.head[5].select" >{{week.head[5].date}}</span>
					</template>
					</el-table-column>
					<el-table-column prop="Sunday" :width="week.tablecolumWidth">
					<template slot="header" slot-scope="scope">
									<i :class="'el-icon-caret-bottom arrow '+week.head[6].select" ></i>
									<span :class="'dayofweek '+week.head[6].select">{{week.head[6].dayofweek}}</span>
									<span :class="'date '+week.head[6].select" >{{week.head[6].date}}</span>
					</template>
					</el-table-column>
				</el-table>
        	</template>
			<!-- 课程叠加 -->
        	<div class="classLayerBox" ref="classLayerBox_week" v-html="week.classHtml"  @click="showGradeDetails($event)"></div>
			<!-- 当前时间横线 -->
        	<div class="timeline" ref="timeline_week">
				<i class="el-icon-caret-right"></i>
			</div>
		</div>
      	<div class="month" :style="'display:'+month.display" ref="monthBox">
			<!-- 背景表格 用div实现 -->
			<div class="box">
				<div class="head">
					<div class="dayofweek" v-for="row in month.head" :key="row">{{row}}</div>
				</div>
				<div class="table">
					<div class="itemBox" v-for="(row,i1) in month.seriesData_analyse" :key="i1">
						<div :class="'daterow '+row.isMonth+ (row.isToday?' today':'')">{{row.date}}</div>
						<div class="classbox">
							<div class="row" v-for="(row2,i2) in row.class" :key="i1+''+i2">
								<div class="rowContent" v-for="(row3,i3) in row2" :key="i1+''+i2+''+i3">
									<div :class="'normal clickItem '+ row3.cssclass" v-if="row3.cssclass!='red'"
										:classkey="'3,0,'+i1+','+i2+','+i3"
										@click.stop="showGradeDetails($event)">
										<span class="classname">{{row3.classname}}</span>
										<!-- <br v-if="row3.isonline"> -->
										<span v-if="row3.isonline&&!row3.isonlineend" class="gotoclassButtonMonth"
										 :classkey="'3,0,'+i1+','+i2+','+i3" >进入上课</span>
										<span v-else-if="row3.isonline&&row3.isonlineend" class="seePlaybackButtonMonth"
										 :classkey="'3,0,'+i1+','+i2+','+i3" >查看回放</span>
										<!-- <br v-if="row3.isforeignclass"> -->
										<span v-if="row3.isforeignclass" class="gotoForeignClass"
										 :classkey="'3,0,'+i1+','+i2+','+i3" >外教上课</span>
										<!-- <br v-if="row3.isnativeclass"> -->
										<span v-if="row3.isnativeclass" class="gotoNativeClass"
										 :classkey="'3,0,'+i1+','+i2+','+i3" >中教上课</span>
									</div>
									<div :class="'error '+ row3.cssclass"  v-else>
										<div class="errorClo clickItem" v-for="(row4,index) in row3.classname"
											:classkey="'3,1,'+i1+','+i2+','+i3+','+index"
											@click.stop="showGradeDetails($event)" :key="i1+''+i2+''+i3+''+index">
											<span class="classname">{{row4}}</span>
											<!-- <br v-if="row3.isonline[index]"> -->
											<span v-if="row3.isonline[index]&&!row3.isonlineend[index]" class="gotoclassButtonMonth"
											:classkey="'3,1,'+i1+','+i2+','+i3+','+index" >进入上课</span>
											<span v-else-if="row3.isonline[index]&&row3.isonlineend[index]" class="seePlaybackButtonMonth"
											:classkey="'3,1,'+i1+','+i2+','+i3+','+index" >查看回放</span>
											<!-- <br v-if="row3.isforeignclass[index]"> -->
											<span v-if="row3.isforeignclass[index]" class="gotoForeignClass"
											:classkey="'3,1,'+i1+','+i2+','+i3+','+index" >外教上课</span>
											<!-- <br v-if="row3.isnativeclass[index]"> -->
											<span v-if="row3.isnativeclass[index]" class="gotoNativeClass"
											:classkey="'3,1,'+i1+','+i2+','+i3+','+index" >中教上课</span>
										</div>
									</div>
								</div>
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>
    </div>
	<!-- 表格显示 -->
	<div class="tabledisplayBox" :style="'display:'+tabledisplay">
		<template>
			<el-table
				:data="tabledisplayData.currentPage"
				border
				>
				<el-table-column
					prop="week"
					label="星期"
					align="center">
				</el-table-column>
				<el-table-column
					prop="time"
					label="上课时间"
					align="center">
				</el-table-column>
				<el-table-column
					prop="grade"
					label="班级"
					align="center">
				</el-table-column>
					<el-table-column
					prop="course"
					label="课程"
					align="center">
				</el-table-column>
					<el-table-column
					prop="teacher"
					label="教师"
					align="center">
				</el-table-column>
					<el-table-column
					prop="assistant"
					label="助教"
					align="center">
				</el-table-column>
					<el-table-column
					prop="classroom"
					label="教室"
					align="center">
				</el-table-column>
			</el-table>
		</template>
		<el-row style="text-align: right;padding-right: 0.3rem;margin-top: 0.1rem;margin-bottom: 0.2rem;">
			<el-pagination
				@current-change="tabledisplayChangePage"
				@size-change="handleSizeChange"
				:current-page.sync="tabledisplayObj.currentPage"
				:page-size="tabledisplayObj.size"
				:page-sizes="[10, 20, 30, 40,50,100]"
				layout="total, sizes, prev, pager, next, jumper"
				:total="tabledisplayObj.total">
			</el-pagination>
		</el-row>
	</div>

	<!-- <el-dialog :title="gradeDetails.classname" :visible.sync="dialogGradeDetails">
		<gradeDetails ref="gradeDetails" :gradeDetails='gradeDetails'></gradeDetails>
	</el-dialog> -->
		<!-- 班级详情-->
	<classdetail></classdetail>
	<!-- 试听班级详情 -->
	<trialDetails></trialDetails>
	<!-- 无法进入上课弹窗 -->
	<el-dialog
		class="gotoclassResult"
		:modal="false"
		:close-on-click-modal="false"
		title=""
		:visible.sync="gotoclassResult.visible">
		<el-row>
			<span>暂时无法进入教室上课。</span>
		</el-row>
		<el-row>
			<span>上课时间：</span>
			<span>{{gotoclassResult.timestr}}</span>
		</el-row>
		<span slot="footer" class="dialog-footer">
			<el-button @click="gotoclassResult.visible = false">关 闭</el-button>
		</span>
	</el-dialog>
	<div class="box-coursemodal">
		 <transition name="el-zoom-in-bottom">
			<div v-show="box_coursehover" class="box-coursehover"></div>
		</transition>
	</div>
	<div class="box-courseListModal">

		<transition name="el-fade-in">
			<div v-show="box_courseListHover" class="box-courseListHover">
        <div class="close-courseListModal">
          <i class="el-icon-close" @click="showCourseListModal(false)"></i>
        </div>
      </div>
		</transition>
	</div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex"; //先要引入
import setCampusTime from '@/js/common/setCampusTime';
// import { setInterval } from 'timers';
import trialDetails from '../gradeDetails'
import classdetail from '../../education_manage/common/classdetail';
import { clearTimeout } from 'timers';
import { setTimeout } from 'timers';

export default {
	props: ["syllabusData"],
	components:{classdetail,trialDetails},
	data() {
		return {
			box_coursehover:false,
			box_courseListHover:false,
			parentData:this.syllabusData,
			/**表格形式显示数据 */
			tabledisplay:'none',
			tabledisplayData:{
				all:[],
				currentPage:[]
			},
			tabledisplayObj:{
				currentPage:1,
				size:10,
				total:10
			},
			/**课程表显示 */
			syllabusdisplay:'block',
			dayWeekFirstColumWidth:70,
			day: {
				display:'block',
				/**顶部时间切换标签记录 */
				timechange:0,
				head: {
					dayofweek: "星期一",
					date: "03.30",
					select:''
				},
				/**
				 * 当前课程表时间段内的初始数据
				 *
				 */
				seriesData_primary:[
					{
						starttime:new Date(2019, (new Date()).getMonth(), (new Date()).getDate(), 8, 30, 0, 0),
						endtime:new Date(2019, (new Date()).getMonth(), (new Date()).getDate(), 9, 15, 0, 0),
						classname:'三年二班',//班级名称
						courseName:'数学',//课程名称
						teacherName:'韩梅梅',//教师姓名
						assistant:'李雷',//助教名称
						classroomName:'666'//教室名称
					},

				],
				/**当前课程表时间段内的分类后数据 */
				seriesData_analyse:[],
				classHtml:``
			},
			week:{
				display:'none',
				/**顶部时间切换标签记录 */
				timechange:0,
				tablecolumWidth:207,
				head: [{
						dayofweek: "星期一",
						date: "03.24",
						select:''
					},
					{
						dayofweek: "星期二",
						date: "03.25",
						select:''
					},
					{
						dayofweek: "星期三",
						date: "03.26",
						select:''
					},
					{
						dayofweek: "星期四",
						date: "03.27",
						select:'select'
					},
					{
						dayofweek: "星期五",
						date: "03.28",
						select:''
					},
					{
						dayofweek: "星期六",
						date: "03.29",
						select:''
					},
					{
						dayofweek: "星期日",
						date: "03.30",
						select:''
					},
				],
				seriesData_primary:[
					{
							starttime:new Date(2019, (new Date()).getMonth(), (new Date()).getDate(), 8, 30, 0, 0),
							endtime:new Date(2019, (new Date()).getMonth(), (new Date()).getDate(), 9, 15, 0, 0),
							classname:'三年二班',//班级名称
							courseName:'数学',//课程名称
							teacherName:'韩梅梅',//教师姓名
							assistant:'李雷',//助教名称
							classroomName:'666'//教室名称
					},
				],
				seriesData_analyse:[],
				classHtml:''
			},
			month:{
				display:'none',
				/**顶部时间切换标签记录 */
				timechange:0,
				head:['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
				seriesData_primary:[
					{
							starttime:new Date(2019, (new Date()).getMonth(), (new Date()).getDate()-1, 8, 30, 0, 0),
							endtime:new Date(2019, (new Date()).getMonth(), (new Date()).getDate()-1, 9, 15, 0, 0),
							classname:'三年二班',//班级名称
							courseName:'数学',//课程名称
							teacherName:'韩梅梅',//教师姓名
							assistant:'李雷',//助教名称
							classroomName:'666'//教室名称
					},
				],
				seriesData_analyse:[]
			},
			//时间轴数据 1小时间隔
			yaxisMaxtime:config.campusTime.maxEndTime,//注：最大时间为yaxisData最大时间加一个小时
			yaxisMintime:config.campusTime.minStartTime,
			oneHourHeight:0.90,//y轴一小时的高度 rem
			yaxisData:config.timtlist,
			/**当前课程表开始时间 */
			g_startTime:null,
			/**当前课程表结束时间 */
			g_endTime:null,
			/**显示班级详情弹窗 */
			dialogGradeDetails:false,
			/**班级详情 数据 */
			gradeDetails:{},
			gotoclassResult:{
				visible:false,
				timestr:'6月15号 上午8:00'
			},
			/**区分上午下午 */
			splittimeOfDay:12,
			campusId:this.$store.state.campusId
		};
	},
	methods: {
		/**veu 数组深度复制 解耦 */
		deepCloneArray(arr){
			return arr.map((e)=>{
				if(typeof e==='object'){
					return Object.assign({},e);
				}else{
					return e;
				}
			})
		},
		/**字符串转Date
		 * 形如"2019-03-26 15:50"
		 */
		stringToDate(s){
			// var s ='2018-10-09 10:23:12';
			s=s+':00';
			s = s.replace(/-/g,"/");
			return new Date(s);
		},
		/**
		 * 对象转时间字符串
		 */
		objToTimeStr(start,end){
			let startmonth=start.month<10?'0'+start.month:start.month;
			let endmonth=end.month<10?'0'+end.month:end.month;
			let startday=start.day<10?'0'+start.day:start.day;
			let endday=end.day<10?'0'+end.day:end.day;
			return {
					start:start.year+'-'+startmonth+'-'+startday+' 00:00:00',
					end:end.year+'-'+endmonth+'-'+endday+' 23:59:59'
			}
		},
		//初始化
		init(){

			this.yaxisMaxtime=config.campusTime.maxEndTime;//注：最大时间为yaxisData最大时间加一个小时
			this.yaxisMintime=config.campusTime.minStartTime;
			this.yaxisData=config.timtlist;

			let rem=window.rem;
			this.dayWeekFirstColumWidth=0.7*rem;
			this.week.tablecolumWidth=2.06*rem;
			// this.campusId=this.$store.state.campusId;
			//容器高度
			let height=this.yaxisData.length*this.oneHourHeight+this.oneHourHeight+0.20;
			this.$refs.dayBox.style.height=height+'rem';
			this.$refs.weekBox.style.height=height+'rem';
			//更新头部
			this.updateHeadTimeChangeControl(this.parentData.radio);
			//初始化课程表叠加图层div的高度，要和底层的table保持一致
			this.updateLayerBoxHeight(this,this.$refs.classLayerBox_day,this.$refs.classLayerBox_week);
			//时间线更新 每分钟更新时间线的位置
			// this.updateTimeLinePosition(this,this.$refs.timeline_day,this.$refs.timeline_week);
			// this.updateTimeLineInTime();
			//根据条件更新数据

			this.updateClassTableByCondition();

			/*注册事件*/
			if (document.addEventListener) {
				document.addEventListener('DOMMouseScroll', this.mousewheelFunc, false);
			}//W3C
			window.onmousewheel = document.onmousewheel = this.mousewheelFunc; //IE/Opera/Chrome/Safari
		},
		mousewheelFunc(d){
			this.ismousewheelMove=true;
			if(this.mousewheeltimer)clearTimeout(this.mousewheeltimer);
			if(this.courseHovershowtimer)clearTimeout(this.courseHovershowtimer);
			this.mousewheeltimer=setTimeout(d2=>{
				this.ismousewheelMove=false;
			},250);
		},
		campusChange : function(campusId) { //校区改变
				this.campusId = campusId;
				let vm = this;
				//获取本校区上课时间
      			let param = {campusId: this.campusId}
				api.getListOfCampus(param).then(function(data){
					//debugger
					setCampusTime(data.list);
					vm.init();
				})

		},
		/**获取数据 */
		api_getDataByParam(param,successFun){
			let self=this;
			self.parentData.dataloading=true;
			let timeline_day=this.$refs.timeline_day;
			let timeline_week=this.$refs.timeline_week;
			let classLayerBox_day=this.$refs.classLayerBox_day,
			classLayerBox_week=this.$refs.classLayerBox_week;
			let dayBox=this.$refs.dayBox,weekBox=this.$refs.weekBox;

			param.campusId=this.campusId;
			api.getClassSyllabus(param).then(function(d){
				if(d.result==='操作成功'){
					// console.log(d)
					let data=d.listSyllabus;
					//数据格式化
					let result=[];
					let now=new Date();
					for(let i=0;i<data.length;i++){
						let row=data[i];

						//时间
						row.starttime=self.stringToDate(row.startTime);
						row.endtime=self.stringToDate(row.endTime);

						//超出时间轴范围不予显示
						let begin=row.starttime.getHours()+row.starttime.getMinutes()/60;
						let stop=row.endtime.getHours()+row.endtime.getMinutes()/60;
						if(begin>=self.yaxisMaxtime||stop<=self.yaxisMintime||begin<self.yaxisMintime||stop>self.yaxisMaxtime){
							console.log('该课程超出范围  coursePackageId:'+row.coursePackageId);
							continue;
						}

						//字段改名
						row.classname=row.className||'-';
						row.assistant=row.assisUserName||'-';
						row.teacherName=row.teacherUserName||'-';
						//新增字段
						row.isonline=row.classTypeMode===2;//进入上课按钮-必须字段
						row.isonlineend=false;//是否结课
						if(row.endtime<=now)row.isonlineend=true;
						//双师
						row.isforeignclass=false;//外教上课按钮
						row.isnativeclass=false;//中教上课按钮
						if(row.courseType===4){
							row.isforeignclass=true;//外教上课按钮
							row.isnativeclass=true;//中教上课按钮
						}

						//只有工作台页面才显示进入上课
						if(!self.parentData.headerType){
							row.isonline=false;
							row.isforeignclass=false;//外教上课按钮
							row.isnativeclass=false;//中教上课按钮
						}

						result.push(row);
					}

					successFun(result);
				}
				self.parentData.dataloading=false;
			}).catch(function(){
				self.parentData.dataloading=false;
			});
		},
		/**更新课程表数据 父组件调用此方法更新数据
		 * 条件：
		 *  包括组件本身的时间维度、时间范围；
		 *  以及父组件传递过来的班级、教师、教室、课程
		 */
		updateClassTableByCondition(){

			this.updateTimeLinePosition(this,this.$refs.timeline_day,this.$refs.timeline_week);
			//	alert(this.parentData.classtext)
			let grade=this.parentData.classtext;
			let teacher=this.parentData.teachertext;
			let classroom=this.parentData.classroomtext;
			let course=this.parentData.coursetext;
			let start=this.g_startTime;
			let end=this.g_endTime;
			let teacherOrAssitUserId=this.parentData.teacherOrAssitUserId?this.parentData.teacherOrAssitUserId:"";
			let containTrialClass=this.parentData.containTrialClass;

			let timeobj=this.objToTimeStr(start,end);
			let postData={
				"classId": grade,
				"courseId": course,
				"teacherUserId": teacher,
				"classroomId": classroom,
				"startTime": timeobj.start,
				"endTime": timeobj.end,
				"teacherOrAssitUserId":teacherOrAssitUserId,
				"containTrialClass":containTrialClass
			};
			// console.log(postData)
			let self=this;
			if(this.tabledisplay==='block'){
				let tabledisplayData=this.tabledisplayData,tabledisplayObj=this.tabledisplayObj;
				this.api_getDataByParam(postData,(d)=>{
					self.updateTableDisplayData(d,tabledisplayData,tabledisplayObj);
				});
			}
			else if(this.syllabusdisplay==='block')
			{
				if(this.day.display==='block')
				{
					this.api_getDataByParam(postData,(d)=>{
						self.day.seriesData_primary=d;
						self.day.seriesData_analyse=self.groupClassItemByTime(self.day.seriesData_primary);
						self.drawClassTableByGroupData_day(self.day.seriesData_analyse);
					});
				}
				else if(this.week.display==='block'){
					this.api_getDataByParam(postData,(d)=>{
							self.week.seriesData_primary=d;
							self.week.seriesData_analyse=self.groupClassItemByTime(self.week.seriesData_primary);
							self.drawClassTableByGroupData_week(self.week.seriesData_analyse);
					});
				}
				else if(this.month.display==='block'){
					this.api_getDataByParam(postData,(d)=>{
							self.month.seriesData_primary=d;
							let groupdata=self.groupClassItemByTime(self.month.seriesData_primary);
							self.month.seriesData_analyse=self.drawClassTableByGroupData_month(groupdata,self.g_startTime.year,self.g_startTime.month-1);

							//绑定课程hover事件
							window.$('.gotoclassButtonMonth').unbind('click');
							window.$('.seePlaybackButtonMonth').unbind('click');
							window.$('.gotoForeignClass').unbind('click');
							window.$('.gotoNativeClass').unbind('click');
							$('.clickItem').unbind('mouseenter').unbind('mouseleave');//hover解绑
							self.$nextTick(_ => {
								window.$('.gotoclassButtonMonth').on('click',this.gotoClass);
								window.$('.seePlaybackButtonMonth').on('click',this.seePlayback);
								window.$('.gotoForeignClass').on('click',this.gotoClass);
								window.$('.gotoNativeClass').on('click',this.gotoClass);
								self.courseItemHover();
							});
					});
				}
			}
		},
		/**切换显示方式
		 * type:
		 * 1 课程表方式
		 * 2 表格方式
		 */
		changeDisplayType(type=1){
			if(type===1){
				this.syllabusdisplay='block';
				this.tabledisplay='none';
			}
			else{
				this.syllabusdisplay='none';
				this.tabledisplay='block';
			}
			this.updateClassTableByCondition();
		},
		/**表格显示形式翻页 */
		tabledisplayChangePage(val){
			let startNum=(val-1)*this.tabledisplayObj.size;
			let endNum=startNum+this.tabledisplayObj.size;
			if(endNum>this.tabledisplayData.all.length)
				endNum=this.tabledisplayData.all.length;
			this.tabledisplayData.currentPage=this.tabledisplayData.all.slice(startNum,endNum);
		},
		handleSizeChange(val){
			this.tabledisplayObj.size=val;
			this.tabledisplayObj.currentPage=1;
			this.tabledisplayChangePage(1);
		},
		/**更新表格显示形式的数据 */
		updateTableDisplayData(data,tabledisplayData,tabledisplayObj){
			let weekend=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
			let result=[];
			for(let i=0;i<data.length;i++){
				let row=data[i];
				let temp={};
				let week=weekend[row.starttime.getDay()];
				let month=row.starttime.getMonth()+1;month=month<10?'0'+month:month;
				let day=row.starttime.getDate();day=day<10?'0'+day:day;
				let sh=row.starttime.getHours();
				let sm=row.starttime.getMinutes();sm=sm<10?'0'+sm:sm;
				let starttime=sh+':'+sm;
				let eh=row.endtime.getHours();
				let em=row.endtime.getMinutes();em=em<10?'0'+em:em;
				let noon=eh>12?'下午':'上午';
				let endtime=eh+':'+em;
				temp['week']=week+' '+month+'/'+day;
				temp['time']=noon+' '+starttime+'-'+endtime;

				temp['grade']=row.classname;
				// let tstr=row.courseName||'';
				// tstr+=' '+row.orderBy+'次课';
				temp['course']=row.courseName;
				temp['teacher']=row.teacherName;
				temp['assistant']=row.assisUserName;
				temp['classroom']=row.classroomName;

				result.push(temp);

			}
			tabledisplayData.all=result;
			let total=result.length;
			tabledisplayObj.total=total;
			tabledisplayObj.currentPage=0;
			// tabledisplayObj.size=10;
			let count=result.length>tabledisplayObj.size?8:result.length;
			tabledisplayData.currentPage=tabledisplayData.all.slice(0,count);
		},

		/**切换显示课表 当日 本周 本月 */
		changeClassType(){
			let type=this.parentData.radio;
			this.day.display='none';
			this.week.display='none';
			this.month.display='none';
			this.week.timechange=0;
			this.day.timechange=0;
			this.month.timechange=0;
			this.updateHeadTimeChangeControl(type);
			switch(type){
				case '今日':{
					this.day.display='block';
					break;
				};
				case '本周':{
					this.week.display='block';
					break;
				};
				case '本月':{
					this.month.display='block';
					break;
				};
			}
			this.updateClassTableByCondition();
		},
		/**更新时间 顶部左右切换按钮 */
		changeClassTime(add){
			let type=this.parentData.radio;
			switch(type){
				case '今日':{
					this.day.timechange+=add;
					this.updateHeadTimeChangeControl(type,this.day.timechange);
					break;
				};
				case '本周':{
					this.week.timechange+=add;
					this.updateHeadTimeChangeControl(type,this.week.timechange);
					break;
				};
				case '本月':{
					this.month.timechange+=add;
					this.updateHeadTimeChangeControl(type,this.month.timechange);
					break;
				};
			}
			this.updateClassTableByCondition();
		},
		/**更新顶部时间切换标签
		 * type 类型 今日 本周 本月
		 * add 变化时间 type为今日时，加减天；为周，加减一周
		 */
		updateHeadTimeChangeControl(type,add=0){
			let daytime=new Date();
			if(type==='今日'){
					daytime.setDate(daytime.getDate()+add);
					let month=daytime.getMonth()+1;
					month=month<10?'0'+month:month;
					let day=daytime.getDate();
					day=day<10?'0'+day:day;
					this.parentData.currentTime=daytime.getFullYear()+'.'+month+'.'+day;

					this.g_startTime={year:daytime.getFullYear(),month:daytime.getMonth()+1,day:daytime.getDate()};
					this.g_endTime={year:daytime.getFullYear(),month:daytime.getMonth()+1,day:daytime.getDate()};
					//同时更新表格头部
					this.updateHead({today:daytime,weekstart:false});
			}
			else if(type==='本周'){
				daytime.setDate(daytime.getDate()+add*7);
				let num = daytime.getDay()||7;
				daytime.setDate(daytime.getDate() - num +1); //本周第一天
				let month=daytime.getMonth()+1;
				month=month<10?'0'+month:month;
				let day=daytime.getDate();
				day=day<10?'0'+day:day;
				let start=daytime.getFullYear()+'.'+month+'.'+day;
				this.g_startTime={year:daytime.getFullYear(),month:daytime.getMonth()+1,day:daytime.getDate()};

				//同时更新表格头部
				this.updateHead({today:false,weekstart:{year:daytime.getFullYear(),month:daytime.getMonth(),day:daytime.getDate()}});

				daytime.setDate(daytime.getDate()+6); //本周最后一天
				month=daytime.getMonth()+1;
				month=month<10?'0'+month:month;
				day=daytime.getDate();
				day=day<10?'0'+day:day;
				let end=daytime.getFullYear()+'.'+month+'.'+day;
				this.g_endTime={year:daytime.getFullYear(),month:daytime.getMonth()+1,day:daytime.getDate()};

				this.parentData.currentTime=start+' - '+end;


			}
			else{
				daytime.setDate(1);
				daytime.setMonth(daytime.getMonth()+add);
				let year=daytime.getFullYear();
				let month=daytime.getMonth()+1;
				this.parentData.currentTime=year+'年'+month+'月';

				this.g_startTime={year:year,month:month,day:1};
				daytime.setMonth(month,0);//本月最后一天
				this.g_endTime={year:year,month:month,day:daytime.getDate()};
			}
		},
		/**
		 * 更新课程表叠加图层div的高度，要和底层的table保持一致
		 */
		updateLayerBoxHeight(self,classLayerBox_day,classLayerBox_week){
			let height=self.yaxisData.length*self.oneHourHeight;
			classLayerBox_day.style.height=height+'rem';
			classLayerBox_day.style.top='-'+height+'rem';
			classLayerBox_week.style.height=height+'rem';
			classLayerBox_week.style.top='-'+height+'rem';
		},
		/**时间线更新 每分钟更新时间线的位置 */
		updateTimeLineInTime(){
			// let self=this;
			// let timeline_day=this.$refs.timeline_day;
			// let timeline_week=this.$refs.timeline_week;
			// setInterval(function(){
			// 	self.updateTimeLinePosition(self,timeline_day,timeline_week);
			// },60*1000);
		},
		updateTimeLinePosition(self,timeline_day,timeline_week){
			// console.log('时间线更新')
			let time=new Date();
			let hour=time.getHours();
			let minute=time.getMinutes();
			if(hour<self.yaxisMintime){
				hour=self.yaxisMintime;
				minute=0;
			}
			else if(hour>=self.yaxisMaxtime){
				hour=self.yaxisMaxtime;
				minute=0;
			}
			let persent=(hour+minute/60-self.yaxisMintime)/(self.yaxisMaxtime-self.yaxisMintime);
			let height=self.yaxisData.length*self.oneHourHeight;
			let startY=-2*height;
			let endY=startY+persent*height;
			// console.log(endY)
			// console.log(self.$refs)
			timeline_day.style.top=endY+'rem';
			timeline_week.style.top=endY+'rem';
		},
		/**更新表格头部 星期 */
		updateHead(timeObj){
			let now=new Date();
			//今日头部更新
			if(timeObj.today){
				let weekend=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
				let daytime=timeObj.today;
				this.day.head.dayofweek=weekend[daytime.getDay()];
				let month=daytime.getMonth()+1;
				month=month<10?'0'+month:month;
				let day=daytime.getDate();
				day=day<10?'0'+day:day;
				this.day.head.date=month+'.'+day;

				this.day.head.select=''
				this.$refs.timeline_day.style.visibility='hidden';
				this.$refs.timeline_week.style.visibility='hidden';
				if(daytime.getFullYear()===now.getFullYear()
					&&daytime.getMonth()===now.getMonth()
					&&daytime.getDate()===now.getDate())
				{
					this.day.head.select='select';
					this.$refs.timeline_day.style.visibility='visible';
					this.$refs.timeline_week.style.visibility='visible';
				}
			}
			//本周头部更新
			if(timeObj.weekstart){
				let tempday = new Date(timeObj.weekstart.year,timeObj.weekstart.month,timeObj.weekstart.day,0,0,0);
				// let weekstart=timeObj.weekstart;
				// let num = tempday.getDay()||7;
				// tempday.setDate(tempday.getDate() - num+1); //本周第一天
				this.$refs.timeline_day.style.visibility='hidden';
				this.$refs.timeline_week.style.visibility='hidden';
				for(let i=0;i<7;i++){
					let tmonth=tempday.getMonth()+1;
					tmonth=tmonth<10?'0'+tmonth:tmonth;
					let tday=tempday.getDate();
					tday=tday<10?'0'+tday:tday;

					let select='';
					if(tempday.getFullYear()===now.getFullYear()
					&&tempday.getMonth()===now.getMonth()
					&&tempday.getDate()===now.getDate()){
						select='select';
						this.$refs.timeline_day.style.visibility='visible';
						this.$refs.timeline_week.style.visibility='visible';
					}

					let tdate=tmonth+'.'+tday;
					this.week.head[i].date=tdate;
					this.week.head[i].select=select;
					tempday.setDate(tempday.getDate()+1);
				}
			}


		},
		/**
		 * 判断时间是否重合
		 * 重合 返回true
		 */
		isTimeContains(startObj,endObj,startField='starttime',endField='endtime'){
			let st1=startObj[startField],et1=startObj[endField],
			st2=endObj[startField],et2=endObj[endField];
			let result=false;
			let combineStart,combineEnd;
			combineStart=st1;
			combineEnd=et1>et2?et1:et2;
			if(st1>st2){
				combineStart=st2;
				if(et2>st1){
					result=true;
				}
			}
			else if(st1===st2){
				result=true;
			}
			else{
				if(st2<et1){
					result=true;
				}
			}
			return {contains:result,start:combineStart,end:combineEnd};
		},
		/**
		 * 判断两个课表是否冲突
		 * 冲突 返回true
		 */
		isClassConlict(d1,d2,nameField='teacherName',assistantField='assistant',classrommField='classroomName'){
			if(!this.isTimeContains(d1,d2).contains){
				return false;
			}
			if(d1.conflict)
			{
				for(let i=0;i<d1[nameField].length;i++){
					if(d1[nameField][i]===d2[nameField]||
					// d1[assistantField][i]===d2[assistantField]||
					d1[classrommField][i]===d2[classrommField])
						return true;
					else
						return false;
				}
			}
			else{
				if(d1[nameField]===d2[nameField]||
				// d1[assistantField]===d2[assistantField]||
				d1[classrommField]===d2[classrommField])
					return true;
				else
					return false;
			}

		},
		/**
		 * 合并冲突课表
		 * 字段为定义的字段
		 * 返回 合并后的数据
		 */
		combineConlictClass(row1,row2){
				let rowj=row1;
				let rowk=row2;
				let start=rowk.starttime>rowj.starttime?rowj.starttime:rowk.starttime;
				let end=rowk.endtime>rowj.endtime?rowk.endtime:rowj.endtime;
				let result={
					starttime:start,
					endtime:end,
					conflict:true
				}
				if(rowj.conflict){
					for(let key2 in rowj){
						if(key2==='starttime'||key2==='endtime' ||key2==='conflict')continue;
						result[key2]=rowj[key2].concat([rowk[key2]]);
					}
				}
				else{
					for(let key2 in rowj){
						if(key2==='starttime'||key2==='endtime'||key2==='conflict')continue;
						result[key2]=[rowj[key2],rowk[key2]]
					}
				}
				return result;
		},
		/**根据时间获取课表位置相关信息 */
		getClassPositionByTime(start,end){
			let startNum=start.getHours()+start.getMinutes()/60;
			let endNum=end.getHours()+end.getMinutes()/60;
			let height=(endNum-startNum)*this.oneHourHeight;

			let top=(startNum-this.yaxisMintime)*this.oneHourHeight;
			return {top:top,height:height};
		},
		/**按时间将课程表数据分行
		 * 分类：按起止时间分析，当时间存在重合时，归为一行
		 * 课程存在冲突:时间重合 and (教师名称相同 or 助教名称相同 or 教室相同)
		 * 当日 本周 本月
		 * 返回分类数据
		 */
		groupClassItemByTime(dataprimry){
			// console.log(dataprimry);
			let data=this.deepCloneArray(dataprimry);
			//按时间排序
			data.sort((a,b)=>{
				 if(a.starttime>b.starttime)
					 return 1;
					else if(a.starttime===b.starttime){
						return 0;
					}
					else
						return -1;
				 });
			//分组
			let result=[];
			for(let ii=0;ii<data.length;ii++){
				let rowii=data[ii];
				let temprow=[rowii];
				let combineStart=tool.clone(rowii['starttime']),combineEnd=tool.clone(rowii['endtime']);
				for(let jj=ii+1;jj<data.length;jj++){
					let rowj=data[jj];
					let obj=this.isTimeContains({starttime:combineStart,endtime:combineEnd},rowj);
					if(obj.contains){
						combineStart=obj.start;
						combineEnd=obj.end;
						temprow.push(rowj);
						data.splice(jj,1);
						jj--;
					}
				}
				result.push(temprow);
			}
			this.combineCourseList=[];
			//检测课程表冲突并合并
			for(let i=0;i<result.length;i++){
				let rowi=result[i];
				if(rowi.length==1){
					continue;
				}
				for(let j=0;j<rowi.length;j++){
					// let rowj=rowi[j];
					for(let k=j+1;k<rowi.length;k++){
						// let rowk=rowi[k];
						//若冲突，则去掉k位置的项，合并至j
						if(this.isClassConlict(rowi[j],rowi[k])){
							rowi[j]=this.combineConlictClass(rowi[j],rowi[k]);
							rowi.splice(k,1);
							k--;
						}
						//开始结束时间相同的课程，只显示最近一个
						if(!rowi[j].conflict&&!rowi[k].conflict){
							if(rowi[j].startTime==rowi[k].startTime&&
							rowi[j].endTime==rowi[k].endTime)
							{
								if(!rowi[j].combineCourseNumber)rowi[j].combineCourseNumber=2;
								else rowi[j].combineCourseNumber++;
								let cr=rowi.splice(k,1)[0];
								this.combineCourseList.push(cr);
								k--;
							}
						}
					}
				}

			}
			// console.log(this.combineCourseList)
			return result;
		},
		/**根据分组后的数据绘制课程表 当日 */
		drawClassTableByGroupData_day(data){
			// console.log(data)
			let html='';
			let now=new Date(),splittime=this.splittimeOfDay;
			// let preTop=0;
			for(let i=0;i<data.length;i++){
				let rowi=data[i];
				let rowHtml='';
				let mtop=90000000;
				//获取最小高度
				for(let j=0;j<rowi.length;j++)
				{
					let rowj=rowi[j];
					let starttime=rowj.starttime;
					let endtime=rowj.endtime;
					/**课表高度 */
					let position=this.getClassPositionByTime(starttime,endtime);
					if(mtop>position.top)mtop=position.top;
				}
				for(let j=0;j<rowi.length;j++){
					let rowj=rowi[j];
					let starttime=rowj.starttime;
					let endtime=rowj.endtime;
					/**课表高度 */
					let position=this.getClassPositionByTime(starttime,endtime);
					let classItemTop=0;
					if(mtop<position.top){
						classItemTop=position.top-mtop;
					}
					// if(preHeight<position.height)preHeight=position.height;
					/**课程状态：冲突 完成 上午 下午 */
					let type='blue';
					if(starttime.getHours()>=splittime){
						type='yellow';
					}
					if(rowj.attendMode===1){
						type='gray';
					}
					/**课程内容描述 */
					let innerhtml='';
					let clickItem='clickItem';
					let indexKey=`${i},${j},-1`;
					let classkey=`1,0,${i},${j}`;
					let online='',foreignClass='',nativeClass='';
					let combineCourseHtml='',comnineCourseClass='';
					if(rowj.conflict){
						type='red';
						clickItem='';
						indexKey='';
						classkey='';

						for(let m=0;m<rowj.classname.length;m++){
							online='',foreignClass='',nativeClass='';
							if(rowj.isonline[m]&&!rowj.isonlineend[m]){
								online=`<span class="gotoclassButton" classkey="1,1,${i},${j},${m}">进入上课</span>`;
							}
							else if(rowj.isonline[m]&&rowj.isonlineend[m]){
								online=`<span class="seePlaybackButton" classkey="1,1,${i},${j},${m}">查看回放</span>`;
							}
							if(rowj.isforeignclass[m]){
								foreignClass=`<span class="gotoForeignClass" classkey="1,1,${i},${j},${m}">外教上课</span>`;
							}
							if(rowj.isnativeclass[m]){
								nativeClass=`<span class="gotoNativeClass" classkey="1,1,${i},${j},${m}">中教上课</span>`;
							}
							let studentNum1=0,studentNum2=0;
							if(rowj.classStudentNum&&rowj.classStudentNum.length>0)studentNum1=rowj.classStudentNum[m]||0;
							if(rowj.classRecruitNum&&rowj.classRecruitNum.length>0)studentNum2=rowj.classRecruitNum[m]||0;
							innerhtml+=`
							<div class="errorRow errorRow${m+1} clickItem" indexKey="${i},${j},${m}" classkey="1,1,${i},${j},${m}" >

							<span class="classname">
							${rowj.classname[m]}&nbsp;${studentNum1}/${studentNum2}
							</span>
							<span class="courseName">${rowj.courseName[m]||'-'}</span>
							<span class="teacherName">${rowj.teacherName[m]}</span>
							${online}
							${foreignClass}
							${nativeClass}
							</div>
							`;
						}
					}
					else{
						if(rowj.isonline&&!rowj.isonlineend){
							online=`<span class="gotoclassButton" classkey="1,0,${i},${j}">进入上课</span>`;
						}
						else if(rowj.isonline&&rowj.isonlineend){
							online=`<span class="seePlaybackButton" classkey="1,0,${i},${j}">查看回放</span>`;
						}
						if(rowj.isforeignclass){
							foreignClass=`<span class="gotoForeignClass" classkey="1,0,${i},${j}">外教上课</span>`;
						}
						if(rowj.isnativeclass){
							nativeClass=`<span class="gotoNativeClass" classkey="1,0,${i},${j}">中教上课</span>`;
						}
						if(rowj.combineCourseNumber){
							combineCourseHtml=`<span class="combineCourseNumber">${rowj.combineCourseNumber}</span>`;
							comnineCourseClass='combineCourse';
						}
						innerhtml=`
						<span class="classname">
						${rowj.classname}&nbsp;${rowj.classStudentNum||'0'}/${rowj.classRecruitNum||'-'}
						${combineCourseHtml}
						</span>
						<span class="courseName">${rowj.courseName||'-'}</span>
						<span class="teacherName">${rowj.teacherName}</span>
						${online}
						${foreignClass}
						${nativeClass}
						`;
					}
					rowHtml+=`<div class="classItem ${type} ${clickItem} ${comnineCourseClass}" indexKey="${indexKey}" classkey="${classkey}"
					style="height:${position.height}rem;margin-top:${classItemTop}rem;">${innerhtml}</div>`;

				}
				// let mtop2=mtop-preTop;
				// preTop=mtop;
				rowHtml=`<div class="rowItem" style="top:${mtop}rem;">`+rowHtml+'</div>';
				html+=rowHtml;
			}
			window.$('.gotoclassButton').unbind('click');
			window.$('.seePlaybackButton').unbind('click');
			window.$('.gotoForeignClass').unbind('click');
			window.$('.gotoNativeClass').unbind('click');
			$('.clickItem').unbind('mouseenter').unbind('mouseleave');//hover解绑
			this.day.classHtml=html;
			this.$nextTick(_ => {
				window.$('.gotoclassButton').on('click',this.gotoClass);
				window.$('.seePlaybackButton').on('click',this.seePlayback);
				window.$('.gotoForeignClass').on('click',this.gotoClass);
				window.$('.gotoNativeClass').on('click',this.gotoClass);
				this.courseItemHover();
			});
			// console.log(html)
		},
		/**根据分组后的数据绘制课程表 本周 */
		drawClassTableByGroupData_week(data){
			let html='';
			let now=new Date(),splittime=this.splittimeOfDay;
			for(let i=0;i<data.length;i++){
				let rowi=data[i];
				let rowHtml='';
				let mtop=90000000;
				let left=0;
				//获取最小高度
				for(let j=0;j<rowi.length;j++)
				{
					let rowj=rowi[j];
					let starttime=rowj.starttime;
					let endtime=rowj.endtime;
					/**课表高度 */
					let position=this.getClassPositionByTime(starttime,endtime);
					if(mtop>position.top)mtop=position.top;
				}
				for(let j=0;j<rowi.length;j++){
					let rowj=rowi[j];
					let starttime=rowj.starttime;
					let endtime=rowj.endtime;
					let week=starttime.getDay()||7;
					if(week<1)continue;
					left=(week-1)*2.06;
					/**课表高度 */
					let position=this.getClassPositionByTime(starttime,endtime);
					let classItemTop=0;
					if(mtop<position.top){
						classItemTop=position.top-mtop;
					}
					// if(preHeight<position.height)preHeight=position.height;
					/**课程状态：冲突 完成 上午 下午 */
					let type='blue';
					if(starttime.getHours()>=splittime){
						type='yellow';
					}
					if(rowj.attendMode===1){
						type='gray';
					}
					/**课程内容描述 */
					let innerhtml='';
					let clickItem='clickItem';
					let indexKey=`${i},${j},-1`;
					let classkey=`2,0,${i},${j}`;
					let online='',foreignClass='',nativeClass='';
					let combineCourseHtml='',comnineCourseClass='';
					if(rowj.conflict){
						type='red';
						clickItem='';
						indexKey='';
						classkey='';
						for(let m=0;m<rowj.classname.length;m++){
							online='',foreignClass='',nativeClass='';
							if(rowj.isonline[m]&&!rowj.isonlineend[m]){
								online=`<span class="gotoclassButton" classkey="2,1,${i},${j},${m}">进入上课</span>`;
							}
							else if(rowj.isonline[m]&&rowj.isonlineend[m]){
								online=`<span class="seePlaybackButton" classkey="2,1,${i},${j},${m}">查看回放</span>`;
							}
							if(rowj.isforeignclass[m]){
								foreignClass=`<span class="gotoForeignClass" classkey="2,1,${i},${j},${m}">外教上课</span>`;
							}
							if(rowj.isnativeclass[m]){
								nativeClass=`<span class="gotoNativeClass" classkey="2,1,${i},${j},${m}">中教上课</span>`;
							}
							let studentNum1=0,studentNum2=0;
							if(rowj.classStudentNum&&rowj.classStudentNum.length>0)studentNum1=rowj.classStudentNum[m]||0;
							if(rowj.classRecruitNum&&rowj.classRecruitNum.length>0)studentNum2=rowj.classRecruitNum[m]||0;

							innerhtml+=`
							<div class="errorRow errorRow${m+1} clickItem" indexKey="${i},${j},${m}" classkey="2,1,${i},${j},${m}" >
							<span class="classname">${rowj.classname[m]+"&nbsp;"+studentNum1+"/"+studentNum2}</span>
							<span class="courseName">${rowj.courseName[m]||'-'}</span>
							<span class="teacherName">${rowj.teacherName[m]}</span>
							${online}
							${foreignClass}
							${nativeClass}
							</div>
							`;
						}
					}
					else{
						if(rowj.isonline&&!rowj.isonlineend){
							online=`<span class="gotoclassButton" classkey="2,0,${i},${j}">进入上课</span>`;
						}
						else if(rowj.isonline&&rowj.isonlineend){
							online=`<span class="seePlaybackButton" classkey="2,0,${i},${j}">查看回放</span>`;
						}
						if(rowj.isforeignclass){
							foreignClass=`<span class="gotoForeignClass" classkey="2,0,${i},${j}">外教上课</span>`;
						}
						if(rowj.isnativeclass){
							nativeClass=`<span class="gotoNativeClass" classkey="2,0,${i},${j}">中教上课</span>`;
						}
						if(rowj.combineCourseNumber){
							combineCourseHtml=`<span class="combineCourseNumber">${rowj.combineCourseNumber}</span>`;
							comnineCourseClass='combineCourse';
						}
						innerhtml=`
						<span class="classname">
						${rowj.classname}&nbsp;${rowj.classStudentNum||'0'}/${rowj.classRecruitNum||'-'}
						${combineCourseHtml}
						</span>
						<span class="courseName">${rowj.courseName||'-'}</span>
						<span class="teacherName">${rowj.teacherName}</span>
						${online}
						${foreignClass}
						${nativeClass}
						`;
					}
					rowHtml+=`<div class="classItem ${type} ${clickItem} ${comnineCourseClass}"  indexKey="${indexKey}" classkey="${classkey}"
					style="height:${position.height}rem;margin-top:${classItemTop}rem;">${innerhtml}</div>`;
				}
				rowHtml=`<div class="rowItem" style="top:${mtop}rem;left:${left}rem;">`+rowHtml+'</div>';
				html+=rowHtml;
			}
			window.$('.gotoclassButton').unbind('click');
			window.$('.seePlaybackButton').unbind('click');
			window.$('.gotoForeignClass').unbind('click');
			window.$('.gotoNativeClass').unbind('click');
			$('.clickItem').unbind('mouseenter').unbind('mouseleave');//hover解绑
			this.week.classHtml=html;
			this.$nextTick(_ => {
				window.$('.gotoclassButton').on('click',this.gotoClass);
				window.$('.seePlaybackButton').on('click',this.seePlayback);
				window.$('.gotoForeignClass').on('click',this.gotoClass);
				window.$('.gotoNativeClass').on('click',this.gotoClass);
				this.courseItemHover();
			});
			// console.log(html)
		},
		/**根据分组后的数据绘制课程表 本月 */
		drawClassTableByGroupData_month(data,year=(new Date()).getFullYear(),month=(new Date()).getMonth()){
			let timedata=this.getMonthDateByTime(year,month);
			let now=new Date(),splittime=this.splittimeOfDay;
			// console.log(timedata)
			for(let i=0;i<data.length;i++){
				let rowi=data[i];
				let starttime;
				for(let j=0;j<rowi.length;j++){
					let rowj=rowi[j];
					starttime=rowj.starttime;
					let endtime=rowj.endtime;
					/**课程状态：冲突 完成 上午 下午 */
					let type='blue';
					if(starttime.getHours()>=splittime){
						type='yellow';
					}
					if(rowj.attendMode===1){
						type='gray';
					}
					if(rowj.conflict){
						type='red';
					}
					rowj.cssclass=type;

				}

				let year=starttime.getFullYear(),month=starttime.getMonth(),day=starttime.getDate();
				for(let k=0;k<timedata.length;k++){
					let rowk=timedata[k];
					if(rowk.year===year&&rowk.month===month&&rowk.date===day){
						timedata[k].class.push(rowi);
					}
				}
			}
			return timedata;
		},
		/**
		 * 获取本月的初始化日期数据
		 * 注：月份为实际月份减1,如：1月，应为0
		 *  */
		getMonthDateByTime(year=(new Date()).getFullYear(),month=(new Date()).getMonth()){
			let now=new Date();
			let firstDay=new Date(year,month,1);//本月第一天
			let lastDay=new Date(year,month+1,0);//本月最后一天
			let weekstart=firstDay.getDay();
			let addday=0;
			if(weekstart===0){
				addday=1;
			}
			else{
				addday=-weekstart+1;
			}
			let countday=6*7;
			let result=[];
			let k=0;
			for(let i=addday;k<countday;i++){
				let tempday=new Date(year,month,i);
				result.push({
					date:tempday.getDate(),
					class:[],
					year:tempday.getFullYear(),
					month:tempday.getMonth(),
					isMonth:now.getMonth()===tempday.getMonth()?'thisMonth':'',
					isToday:now.getDate()===tempday.getDate()?true:false
				});
				k++;
			}
			return result;
		},
		/**通过dom的ClassKey获取课程数据 */
		getCourseDataByClassKey(dom){
			if(!dom.className.includes('clickItem'))return;
			let types=dom.getAttribute('classkey').split(',');
			if(!types||types.length==0)return;
			let data,param,pageurl;
			if(types[0]=='1'){
				data=tool.clone(this.day.seriesData_analyse);
				if(types[1]=='0'){
					let i=Number(types[2]),j=Number(types[3]);
					param=data[i][j];
				}
				else if(types[1]=='1'){
					let i=Number(types[2]),j=Number(types[3]),m=Number(types[4]);
					param=data[i][j];
					//冲突数据结构，取index的项
					for(let key2 in param){
						param[key2]=param[key2][m];
					}
				}
			}
			else if(types[0]=='2'){
				data=tool.clone(this.week.seriesData_analyse);
				if(types[1]=='0'){
					let i=Number(types[2]),j=Number(types[3]);
					param=data[i][j];
				}
				else if(types[1]=='1'){
					let i=Number(types[2]),j=Number(types[3]),m=Number(types[4]);
					param=data[i][j];
					//冲突数据结构，取index的项
					for(let key2 in param){
						param[key2]=param[key2][m];
					}
				}
			}
			else if(types[0]=='3'){
				let data=tool.clone(this.month.seriesData_analyse);
				if(types[1]=='0'){
					let i1=Number(types[2]),i2=Number(types[3]),i3=Number(types[4]);
					param=data[i1]['class'][i2][i3];
				}
				else if(types[1]=='1'){
					let i1=Number(types[2]),i2=Number(types[3]),i3=Number(types[4]),i4=Number(types[5]);
					param=data[i1]['class'][i2][i3];
					//冲突数据结构，取index的项
					for(let key2 in param){
						param[key2]=param[key2][i4];
					}
				}
			}
			return {type:types[0],data:param};
		},
		/**
		 * 班级详情弹窗
		 * type 1:day ;2 week；3：month
		 * data type=1:dom;type=2:班级数据
		 * index type=1:undefine;type=2:大于0则为冲突
		 */
		showGradeDetails(e){

			/***********获取参数************/
			if(!e.target.className.includes('clickItem'))return;
			let types=e.target.getAttribute('classkey').split(',');
			if(!types||types.length==0)return;
			let data,param,pageurl;
			if(types[0]=='1'){
				data=tool.clone(this.day.seriesData_analyse);
				if(types[1]=='0'){
					let i=Number(types[2]),j=Number(types[3]);
					param=data[i][j];
				}
				else if(types[1]=='1'){
					let i=Number(types[2]),j=Number(types[3]),m=Number(types[4]);
					param=data[i][j];
					//冲突数据结构，取index的项
					for(let key2 in param){
						param[key2]=param[key2][m];
					}
				}
			}
			else if(types[0]=='2'){
				data=tool.clone(this.week.seriesData_analyse);
				if(types[1]=='0'){
					let i=Number(types[2]),j=Number(types[3]);
					param=data[i][j];
				}
				else if(types[1]=='1'){
					let i=Number(types[2]),j=Number(types[3]),m=Number(types[4]);
					param=data[i][j];
					//冲突数据结构，取index的项
					for(let key2 in param){
						param[key2]=param[key2][m];
					}
				}
			}
			else if(types[0]=='3'){
				let data=tool.clone(this.month.seriesData_analyse);
				if(types[1]=='0'){
					let i1=Number(types[2]),i2=Number(types[3]),i3=Number(types[4]);
					param=data[i1]['class'][i2][i3];
				}
				else if(types[1]=='1'){
					let i1=Number(types[2]),i2=Number(types[3]),i3=Number(types[4]),i4=Number(types[5]);
					param=data[i1]['class'][i2][i3];
					//冲突数据结构，取index的项
					for(let key2 in param){
						param[key2]=param[key2][i4];
					}
				}
			}
			/***********获取参数*************/
			if(param.classId){
				// console.log(param)
				//试听课程详情
				if(param.classOrTrialClass===2){
					// alert('试听课程详情')
					this.$store.dispatch('classdetail/getClassInfoTrial',param);	//获取进班班级信息
				}
				//正常课程详情
				else{
					this.$store.dispatch('classdetail/getClassInfo',{classId:param.classId});	//获取进班班级信息
				}

			}

		},
		showGradeDetailsByData(data){
			if(data.classId){
				//试听课程详情
				if(data.classOrTrialClass===2){
					this.$store.dispatch('classdetail/getClassInfoTrial',data);	//获取进班班级信息
				}
				//正常课程详情
				else{
					this.$store.dispatch('classdetail/getClassInfo',{classId:data.classId});	//获取进班班级信息
				}

			}

		},
		/**
		 * 上课按钮点
		 * classkey:
		 * type 1:day ;2 week；3：month
		 * isconflict 0:false;1:true
		 */
		gotoClass(e){
			if(this.courseHovershowtimer)clearTimeout(this.courseHovershowtimer);//点击时重置悬浮弹窗时间
			let types=e.currentTarget.getAttribute('classkey').split(',');
			if(!types||types.length==0)return;
			if(e.stopPropagation)e.stopPropagation();
			let data,param,pageurl,feiboClassUrl,classSyllabusId;
			if(types[0]=='1'){
				data=this.day.seriesData_analyse;
				if(types[1]=='0'){
					let i=Number(types[2]),j=Number(types[3]);
					param=data[i][j];
					pageurl=getCourseUrl(param,false);
					feiboClassUrl=param['feiboClassUrl'];
					classSyllabusId=param['classSyllabusId'];
				}
				else if(types[1]=='1'){
					let i=Number(types[2]),j=Number(types[3]),m=Number(types[4]);
					param=data[i][j];
					pageurl=getCourseUrl(param,true,m);
					feiboClassUrl=param['feiboClassUrl'][m];
					classSyllabusId=param['classSyllabusId'][m];
				}
			}
			else if(types[0]=='2'){
				data=this.week.seriesData_analyse;
				if(types[1]=='0'){
					let i=Number(types[2]),j=Number(types[3]);
					param=data[i][j];
					pageurl=getCourseUrl(param,false);
					feiboClassUrl=param['feiboClassUrl'];
					classSyllabusId=param['classSyllabusId'];
				}
				else if(types[1]=='1'){
					let i=Number(types[2]),j=Number(types[3]),m=Number(types[4]);
					param=data[i][j];
					pageurl=getCourseUrl(param,true,m);
					feiboClassUrl=param['feiboClassUrl'][m];
					classSyllabusId=param['classSyllabusId'][m];
				}
			}
			else if(types[0]=='3'){
				let data=this.month.seriesData_analyse;
				if(types[1]=='0'){
					let i1=Number(types[2]),i2=Number(types[3]),i3=Number(types[4]);
					param=data[i1]['class'][i2][i3];
					pageurl=getCourseUrl(param,false);
					feiboClassUrl=param['feiboClassUrl'];
					classSyllabusId=param['classSyllabusId'];
				}
				else if(types[1]=='1'){
					let i1=Number(types[2]),i2=Number(types[3]),i3=Number(types[4]),i4=Number(types[5]);
					param=data[i1]['class'][i2][i3];
					pageurl=getCourseUrl(param,true,i4);
					feiboClassUrl=param['feiboClassUrl'][i4];
					classSyllabusId=param['classSyllabusId'][i4];
				}
			}
			//判断是否在时间范围内
			//提前半小时可以加入课程
			let starttime=param.starttime;
			let endtime=param.endtime;
			let now=new Date();
			let clonestart=new Date(starttime);
			clonestart.setMinutes(clonestart.getMinutes()-30);
			if(now<clonestart||now>endtime){
				let month=starttime.getMonth()+1,day=starttime.getDate(),hour=starttime.getHours(),minute=starttime.getMinutes();
				day=day<10?('0'+day):day;minute=minute<10?('0'+minute):minute;
				this.gotoclassResult.timestr=`${month}月${day}号 ${hour}:${minute}`;
				this.gotoclassResult.visible=true;
				return;
			}
			//根据类型跳转至不同课程
			let classname=e.currentTarget.innerText;
			if(classname=='外教上课'){
				if(feiboClassUrl){
					window.open(feiboClassUrl);
				}
				else{
					this.$message({
						message: '课程地址为空！',
						type: 'warning'
					});
				}
			}
			else if(classname=='中教上课'){
				if(classSyllabusId){
					let index = 1;
					let routeData = this.$router.resolve({
						path: this.$store.state.permit["44"].path,
						query: {classSyllabusId: classSyllabusId,index:index}
					});
					window.open(routeData.href, 'newwindow',
					'width='+(window.screen.availWidth-10)+',height='+(window.screen.availHeight-30)+
						',top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no');
				}
				else{
					this.$message({
						message: '课节ID为空！',
						type: 'warning'
					});
				}

			}
			else if(classname=='进入上课'){
				if(pageurl)
					window.open(pageurl);
				else{
					this.$message({
						message: '无法进入教室，请先创建网络教室',
						type: 'warning'
					});
				}
			}

			function getCourseUrl(indata,isarray,index=-1){
				let assisUrl,patrolUrl,teacherUrl;
				if(isarray){
					assisUrl=indata.assisUrl[index];
					patrolUrl=indata.patrolUrl[index];
					teacherUrl=indata.teacherUrl[index];
				}
				else{
					assisUrl=indata.assisUrl;
					patrolUrl=indata.patrolUrl;
					teacherUrl=indata.teacherUrl;
				}
				return assisUrl||patrolUrl||teacherUrl;
			}
		},
		/**悬浮弹窗 上课按钮点 */
		gotoClassByData(type,data){
			let pageurl=data.assisUrl||data.patrolUrl||data.teacherUrl,
			feiboClassUrl=data['feiboClassUrl'],
			classSyllabusId=data['classSyllabusId'];

			//判断是否在时间范围内
			//提前半小时可以加入课程
			let starttime=data.starttime;
			let endtime=data.endtime;
			let now=new Date();
			let clonestart=new Date(starttime);
			clonestart.setMinutes(clonestart.getMinutes()-30);
			if(now<clonestart||now>endtime){
				let month=starttime.getMonth()+1,day=starttime.getDate(),hour=starttime.getHours(),
				minute=starttime.getMinutes();
				day=day<10?('0'+day):day;minute=minute<10?('0'+minute):minute;
				this.gotoclassResult.timestr=`${month}月${day}号 ${hour}:${minute}`;
				this.gotoclassResult.visible=true;
				return;
			}
			//根据类型跳转至不同课程
			if(type==2){
				if(feiboClassUrl){
					window.open(feiboClassUrl);
				}
				else{
					this.$message({
						message: '课程地址为空！',
						type: 'warning'
					});
				}
			}
			else if(type==3){
				if(classSyllabusId){
					let index = 1;
					let routeData = this.$router.resolve({
						path: this.$store.state.permit["44"].path,
						query: {classSyllabusId: classSyllabusId,index:index}
					});
					window.open(routeData.href, 'newwindow',
					'width='+(window.screen.availWidth-10)+',height='+(window.screen.availHeight-30)+
						',top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no');
				}
				else{
					this.$message({
						message: '课节ID为空！',
						type: 'warning'
					});
				}

			}
			else if(type==1){
				if(pageurl)
					window.open(pageurl);
				else{
					this.$message({
						message: '无法进入教室，请先创建网络教室',
						type: 'warning'
					});
				}
			}

		},
		/**查看回放 */
		seePlayback(e){
			if(this.courseHovershowtimer)clearTimeout(this.courseHovershowtimer);//点击时重置悬浮弹窗时间
			let types=e.currentTarget.getAttribute('classkey').split(',');
			if(!types||types.length==0)return;
			if(e.stopPropagation)e.stopPropagation();
			let data,param,pageurl,feiboClassUrl,classSyllabusId;
			if(types[0]=='1'){
				data=this.day.seriesData_analyse;
				if(types[1]=='0'){
					let i=Number(types[2]),j=Number(types[3]);
					param=data[i][j];
					pageurl=getCourseUrl(param,false);
					feiboClassUrl=param['feiboClassUrl'];
					classSyllabusId=param['classSyllabusId'];
				}
				else if(types[1]=='1'){
					let i=Number(types[2]),j=Number(types[3]),m=Number(types[4]);
					param=data[i][j];
					pageurl=getCourseUrl(param,true,m);
					feiboClassUrl=param['feiboClassUrl'][m];
					classSyllabusId=param['classSyllabusId'][m];
				}
			}
			else if(types[0]=='2'){
				data=this.week.seriesData_analyse;
				if(types[1]=='0'){
					let i=Number(types[2]),j=Number(types[3]);
					param=data[i][j];
					pageurl=getCourseUrl(param,false);
					feiboClassUrl=param['feiboClassUrl'];
					classSyllabusId=param['classSyllabusId'];
				}
				else if(types[1]=='1'){
					let i=Number(types[2]),j=Number(types[3]),m=Number(types[4]);
					param=data[i][j];
					pageurl=getCourseUrl(param,true,m);
					feiboClassUrl=param['feiboClassUrl'][m];
					classSyllabusId=param['classSyllabusId'][m];
				}
			}
			else if(types[0]=='3'){
				let data=this.month.seriesData_analyse;
				if(types[1]=='0'){
					let i1=Number(types[2]),i2=Number(types[3]),i3=Number(types[4]);
					param=data[i1]['class'][i2][i3];
					pageurl=getCourseUrl(param,false);
					feiboClassUrl=param['feiboClassUrl'];
					classSyllabusId=param['classSyllabusId'];
				}
				else if(types[1]=='1'){
					let i1=Number(types[2]),i2=Number(types[3]),i3=Number(types[4]),i4=Number(types[5]);
					param=data[i1]['class'][i2][i3];
					pageurl=getCourseUrl(param,true,i4);
					feiboClassUrl=param['feiboClassUrl'][i4];
					classSyllabusId=param['classSyllabusId'][i4];
				}
			}
			let classname=e.currentTarget.innerText;
			if(classname=='查看回放'){
				if(pageurl)
					window.open(pageurl);
				else{
					this.$message({
						message: '暂时没有回放记录',
						type: 'warning'
					});
				}
			}

			function getCourseUrl(indata,isarray,index=-1){
				let playUrl;
				if(isarray){
					playUrl=indata.playUrl[index];
				}
				else{
					playUrl=indata.playUrl;
				}
				return playUrl;
			}
		},
		/**悬浮弹窗 查看回放 */
		seePlaybackByData(type,data){
			let pageurl=data.assisUrl||data.patrolUrl||data.teacherUrl,
			feiboClassUrl=data['feiboClassUrl'],
			classSyllabusId=data['classSyllabusId'];
			if(type==1){
				if(pageurl)
					window.open(pageurl);
				else{
					this.$message({
						message: '暂时没有回放记录',
						type: 'warning'
					});
				}
			}

		},
		/**鼠标悬浮 */
		courseItemHover(){
			let self=this;
			let isenterTooltip=false;//是否已进入弹窗
			let durationShow=800,durationHide=200;
			//普通课程悬浮
			$('.clickItem').not('.combineCourse').hover(function(d){
				if(self.ismousewheelMove){
					if(self.courseHovershowtimer)clearTimeout(self.courseHovershowtimer);
					return;
				}
				let ele=d.currentTarget;
				let left=d.clientX,top=d.clientY,width=3*window.rem,height=1.8*window.rem;
				let rect =ele.getBoundingClientRect();//获取dom的屏幕位置
				left=(rect.left+rect.right)/2;
				top=rect.top;//(rect.top+rect.bottom)/2;
				let offsetTop=0.18*window.rem;

				self.courseHovershowtimer=setTimeout(d=>{
					let eleclone=$(ele).clone(true);
					eleclone.css('height','100%');
					eleclone.css('margin-top','0');
					eleclone.unbind('mouseenter').unbind('mouseleave');
					$('.box-coursehover .clickItem').unbind();
					self.formateCourseTooltip(eleclone[0]);
					$('.box-coursehover').html(eleclone[0]);
					$('.box-coursehover .clickItem').on('click',d=>{self.showGradeDetails({target:eleclone[0]})});

					$('.box-coursehover').css({
						left:(left-width/2)+'px',
						top:(top-height-offsetTop)+'px'
					});
					$('.box-coursemodal').css({
						display:'block'
					});
					self.box_coursehover=true;
				},durationShow);
			},function(){
				if(self.courseHovershowtimer)clearTimeout(self.courseHovershowtimer);
				setTimeout(d=>{
					if(!isenterTooltip)
					self.box_coursehover=false;
				},durationHide);
			});

			$('.box-coursehover').hover(function(d){
				isenterTooltip=true;
			},function(){
				isenterTooltip=false;
				setTimeout(d=>{
					self.box_coursehover=false;
				},durationHide);

			});
			//时间相同合并课程悬浮
			$('.clickItem.combineCourse').hover(function(d){
				if(self.ismousewheelMove){
					if(self.courseHovershowtimer)clearTimeout(self.courseHovershowtimer);
					return;
				}
				let num=self.combineCourseList;
				let course=self.getCourseDataByClassKey(d.currentTarget);
				let startTime=course.data.startTime;
				let endTime=course.data.endTime;
				let courseList=[course.data];
				self.combineCourseList.forEach(crow=>{
					if(crow.startTime==startTime&&crow.endTime==endTime){
						courseList.push(crow);
					}
				});
				self.drawCourseListModal(courseList);

				self.courseHovershowtimer=setTimeout(d=>{
					self.showCourseListModal(true);
					self.box_courseListHover=true;
				},durationShow);

			},function(){
				if(self.courseHovershowtimer)clearTimeout(self.courseHovershowtimer);
			});

		},
		/** */
		formateCourseTooltip(dom){
			let obj=this.getCourseDataByClassKey(dom);
			let data=obj.data;
			if(obj.type!='3'){
				let starttime=data.startTime.split(' ');
				let endtime=data.endTime.split(' ');
				$(dom).prepend(`<span class="time">上课时间：${starttime[0]} ${starttime[1]}-${endtime[1]}</span>`);
				// console.log($(dom).find('.classname'));
				$(dom).find('.classname').text(`班级：${data.className||''}`);
				$(dom).find('.courseName').prepend('课程：');
				$(dom).find('.teacherName').prepend('教师：');
				$(dom).find('.teacherName').after(`<span class="classroom">教室：${data.classroomName||''}</span>`);
				$(dom).find('.classroom').after(`<span class="studentName">学员：
				${data.classStudentNum||'0'}/
				${data.classRecruitNum||'0'}(已有学员/计划招生)
				</span>`);
			}
			else{
				// console.log(dom)
				let starttime=data.startTime.split(' ');
				let endtime=data.endTime.split(' ');
				$(dom).prepend(`<span class="time">上课时间：${starttime[0]} ${starttime[1]}-${endtime[1]}</span>`);
				$(dom).find('.classname').text(`班级：${data.className||''}`);
				$(dom).find('.classname').after(`<span class="courseName">课程：${data.courseName||''}</span>`);
				$(dom).find('.courseName').after(`<span class="teacherName">教师：${data.teacherName||''}</span>`);
				$(dom).find('.teacherName').after(`<span class="classroom">教室：${data.classroomName||''}</span>`);
				$(dom).find('.classroom').after(`<span class="studentName">学员：
				${data.classStudentNum||'0'}/
				${data.classRecruitNum||'0'}(已有学员/计划招生)
				</span>`);
			}
			$(dom).append(`<i style="position: absolute;
				bottom: -0.2rem;
				left: 1.3rem;
				font-size: 0.3rem;" class="el-icon-caret-bottom"></i>`);
		},
		showCourseListModal(visible){
			let display=visible?'flex':'none';
			$('.box-courseListModal').css({
				display:display
			});
		},
		/**绘制合并课程悬浮弹窗 */
		drawCourseListModal(data){
			let splittime=this.splittimeOfDay;
			$('.box-courseListHover .btn').unbind();
			$('.box-courseListHover .clickItem').unbind();
			$('.box-courseListHover').find('.classItem').remove();
			let self=this;
			for(let i=0;i<data.length;i++){
				let row=data[i];
				row.starttime=this.stringToDate(row.startTime);
				row.endtime=this.stringToDate(row.endTime);
				/**课程状态：冲突 完成 上午 下午 */
				let type='blue';
				if(row.starttime.getHours()>=splittime){
					type='yellow';
				}
				if(row.attendMode===1){
					type='gray';
				}
				/**课程内容描述 */
				let online='',foreignClass='',nativeClass='';
				if(row.isonline&&!row.isonlineend){
					online=$(`<span class="btn">进入上课</span>`);
					online.click(()=>{self.gotoClassByData(1,row)});
				}
				else if(row.isonline&&row.isonlineend){
					online=$(`<span class="btn">查看回放</span>`);
					online.click(()=>{self.seePlaybackByData(1,row)});
				}
				if(row.isforeignclass){
					foreignClass=$(`<span class="btn">外教上课</span>`);
					foreignClass.click(()=>{self.gotoClassByData(2,row)});
				}
				if(row.isnativeclass){
					nativeClass=$(`<span class="btn">中教上课</span>`);
					nativeClass.click(()=>{self.gotoClassByData(3,row)});
				}
				let starttime=row.startTime.split(' ');
				let endtime=row.endTime.split(' ');
				let innerhtml=$(`
					<div class="classItem ${type} clickItem">
						<span class="time">上课时间：${starttime[0]} ${starttime[1]}-${endtime[1]}</span>
						<span class="classname">班级：${row.classname||'-'}</span>
						<span class="courseName">课程：${row.courseName||'-'}</span>
						<span class="teacherName">教师：${row.teacherName||'-'}</span>
						<span class="teacherName">教室：${row.classroomName||'-'}</span>
						<span class="studentName">学员：
							${row.classStudentNum||'0'}/
							${row.classRecruitNum||'0'}(已有学员/计划招生)
						</span>
					</div>
				`);
				innerhtml.append(online);
				innerhtml.append(foreignClass);
				innerhtml.append(nativeClass);
				innerhtml.click(dom=>{
					if(!dom.target.className.includes('clickItem'))return;
					self.showGradeDetailsByData(row)
				});
				$('.box-courseListHover').append(innerhtml);
			}

		},

	},
	mounted(){
	//	this.init()
	},
  	computed: {}
};
</script>

<style lang="scss">
.syllabuscontainer {
	.title_workPlatform {
		background-color: #f5f7fa;
		padding: 0.08rem 0.32rem 0.08rem 0.32rem;
		border-radius: 0.1rem 0.1rem 0 0;
		line-height: 0.35rem;
		font-size: 0.14rem;
		// overflow: hidden;
		.toprow {
		text-align: center;
		/* background-color: white; */
		left: 13%;
		width: 70%;
		margin-top: -2.25%;
				user-select: none;
				font-size: 0.18rem;
		.timetxt {
			margin: 0.2rem;

		}
		.btn:hover {
			cursor: pointer;
			color: #3885f8;
		}
		}
		.timeselect {
		}
	}
	.title_StudentManage {
		background-color: #f5f7fa;
		padding: 0 0.15rem 0 0.15rem;
		border-radius: 0.1rem 0.1rem 0 0;
		line-height: 0.5rem;
		font-size: 0.18rem;
		text-align: center;
		.toprow {
				user-select: none;
		.timetxt {
			margin: 0.2rem;
		}
		.btn:hover {
			cursor: pointer;
			color: #3885f8;
		}
		}
		.timeselect {
		}
	}
	.calendarBox {
		// 当日课程表
		.day {
			height: 9rem;
			.el-table__header .select{
				color: #3885f8;
			}
			.dayofweek {
				width: 51% !important;
			}
			.date {
				width: 51% !important;
			}
			.arrow {
				color: #3885f8;
				width: 51% !important;
			}
			.el-table__header-wrapper{
				thead{
					tr{
						height: 0.4rem;
					}
				}
			}
			.el-table--scrollable-x .el-table__body-wrapper{
				overflow: hidden !important;
			}
		}
		//本周
		.week{
			height: 9rem;
			.el-table__header .select{
				color: #3885f8;
			}
			.rowItem{
				width: 2.06rem !important;
			}
			.el-table--scrollable-x .el-table__body-wrapper{
				overflow: hidden !important;
			}
		}
		//本月
		.month{
			height: 9.2rem;
			.box{
				position: relative;
				top: 0.2rem;
				left: 2%;
				width: 96%;
				height: 96%;
				display: flex;
				flex-wrap: wrap;
				.head{
					width: 100%;
					height: 5%;
					display: flex;
					color: rgb(50,50,50);
					.dayofweek{
						width: 14.2857142%;
						text-align: center;
						line-height: 0.43rem;
					}
				}
				.table{
					width: 100%;
					height: 95%;
					display: flex;
					align-content: flex-start;
					flex-wrap: wrap;
					color: #909399;
					.itemBox{
						width: 14.2857142%;
						height: 1.4rem;//16.6666666%;
						border-top:0.01rem solid rgba(153, 152, 152, 0.7);
						border-right:0.01rem solid rgba(153, 152, 152, 0.7);
						overflow: auto;
						.daterow{
							text-align: right;
							padding-right: 0.15rem;

							position: absolute;
							z-index: 2;
							background: white;
							width: 2.1023rem;
						}
						.daterow.thisMonth{
							color: rgb(50,50,50);
						}
						.daterow.thisMonth.today{
							color: #3885f8;
							font-weight: bold;
						}
						.classbox{
							margin-top: 0.25rem;
							.row{
								display: flex;
								// margin-top: 0.05rem;
								font-size: 0.14rem;
								padding: 0 0.05rem;
								// height: 0.19rem;
    							overflow: hidden;
								flex-wrap: wrap;
								.rowContent{
									width: 100%;
									margin-right: 0.02rem;
									margin: 0.05rem 0.02rem 0 0;
									height: 0.19rem;
									overflow: hidden;
									.normal{

									}
									.error{
										display: flex;
										.errorClo{
											border: 0.005rem dashed red;
											margin-left: 0.02rem;
										}
									}
									.gotoclassButtonMonth,.seePlaybackButtonMonth,.gotoForeignClass,.gotoNativeClass{
										// margin-left: 0.1rem;
										color: blue;
										// width: 1rem;
										text-decoration: underline;
									}
								}
							}
							.row:hover{
								cursor: pointer;
							}
							.gray{
								border-left:0rem solid;
								background-color: rgb(240,241,246);
								color: rgb(85,85,85);
								background-image: repeating-linear-gradient(-45deg, rgb(238, 241, 246) 20px, rgb(247,248,252) 20px,
							rgb(247,248,252) 40px, rgb(238, 241, 246) 40px, rgb(238, 241, 246) 60px);
							}
							.blue{
								border-left:0.05rem solid;
								border-color: rgb(82,192,255);
								background-color: rgb(228,245,255);
								color: rgb(82,192,255);
							}
							.yellow{
								border-left:0.05rem solid;
								border-color: rgb(254,184,89);
								background-color: rgb(255,244,230);
								color: rgb(254,184,89);
							}
							.red{
								border-left:0.05rem solid;
								border-color: rgb(254,130,140);
								background-color: rgb(255,229,232);
								color: rgb(254,130,140);
							}
						}
					}
					// 滚动条
					.itemBox::-webkit-scrollbar {
						width: 0;
						height: 0;
					}
				}
			}
		}

		// 课程表公共
		.backtable {
			margin-top: 0rem;
			margin-left: 2%;
			width: 96%;
			tr {
						//一小时的行高
				height: 0.9rem;
				max-height: 0.9rem;
				th {
				width: 2.13248rem;
				}
			}
			.dayofweek {
				display: inline-block;
				width: 100%;
				text-align: center;
				// font-weight: 500;
				font-size: 0.17rem;
			}
			.date {
				display: inline-block;
				width: 100%;
				text-align: center;
				// font-weight: 500;
			}
			.arrow {
				// color: #3885f8;
				width: 100%;
				text-align: center;
			}
			.el-table__row td:first-child {
				font-size: 0.16rem;
				color: #666666;
				font-weight: 600;
				width: 0.7rem;
			}
			.el-table__row td:nth-child(1) {
				vertical-align: top;
				padding-top: 0rem;
			}
			.el-table__row td:last-child {
				border-right: 0;
			}
		}
		.el-table--group,
		.el-table--border {
			border: 0;
		}
		.el-table--group::after,
		.el-table--border::after {
			background: rgba(0, 0, 0, 0);
		}
		.el-table__header-wrapper thead th {
			border-right: 0;
		}
		.el-table__header-wrapper thead th:first-child{
			width: 0.7rem;
		}
		.el-table__header-wrapper{
			pointer-events: none;
		}
		.timeline{
			position: relative;
			top: -14.80rem;
			left: 1rem;
			width: 92%;
			height: 0.01rem;
			border: 0.01rem solid #3885f8;
			color: #3885f8;
			background-color: #3885f8;
			pointer-events: none;
			.el-icon-caret-right{
				position: relative;
				left: -0.16rem;
				top: -0.124rem;
			}
		}
		.classLayerBox{
			position: relative;
			top: -7.80rem;
			left: 1.01rem;
			width: 91.5%;
			height: 7.80rem;
			.rowItem{
				position: relative;
				width: 100%;
				height: 0;
				display: flex;
				justify-content: flex-start;
				.classItem{
					border-left:0.05rem solid;
					width: 100%;
					height: 100%;
					margin-left: 0.04rem;
					margin-right: 0.04rem;
					display: flex;
					flex-direction: column;
					font-size: 0.14rem;
					overflow: scroll;
					border-radius: 0.04rem;
					overflow: hidden;
					.box_index {
						position: absolute;
						font-weight: bold;
						top: 0.1rem;
						right: 0.2rem;
						color: #666666;
					}
					.classname{
						font-weight: 600;
						margin-left: 0.1rem;
						pointer-events: none;
					}
					.courseName{
						margin-left: 0.1rem;
						pointer-events: none;
					}
					.teacherName{
						margin-left: 0.1rem;
						pointer-events: none;
					}
					.gotoclassButton,.seePlaybackButton,.gotoForeignClass,.gotoNativeClass{
						margin-left: 0.1rem;
						color: blue;
						width: 1rem;
						text-decoration: underline;
					}
					.errorRow{
						// display: flex;
						// flex-direction: column;
						height: 100%;
						border: 0.01rem red dashed;
						overflow: hidden;
					}
				}
				.classItem.gray{
					border-left:0rem solid;
					background-color: rgb(240,241,246);
					color: rgb(85,85,85);
					background-image: repeating-linear-gradient(-45deg, rgb(238, 241, 246) 20px, rgb(247,248,252) 20px,
						rgb(247,248,252) 40px, rgb(238, 241, 246) 40px, rgb(238, 241, 246) 60px);
				}
				.classItem.blue{
					border-color: rgb(82,192,255);
					background-color: rgb(228,245,255);
					color: rgb(82,192,255);
				}
				.classItem.yellow{
					border-color: rgb(254,184,89);
					background-color: rgb(255,244,230);
					color: rgb(254,184,89);
				}
				.classItem.red{
					border-color: rgb(254,130,140);
					background-color: rgb(255,229,232);
					color: rgb(254,130,140);
				}
				.classItem.red:hover{
					min-width: 0.2rem;
				}
				// 滚动条
				.classItem::-webkit-scrollbar {
					width: 0;
					height: 0;
				}
				.combineCourseNumber{
					padding: 0 0.05rem;
					float: right;
					background-color: red;
				}
			}
			.clickItem:hover{
				cursor: pointer;
			}

		}
	}
	.tabledisplayBox{
		.el-table{
			// height: 4.33rem;
			width: 96%;
			margin: 2%;
			margin-bottom: 0;
		}
	}
	.gotoclassResult{
		top: 0.81rem !important;
		left: 2.1rem !important;
		.el-dialog {
			width: 4.5rem !important;
			.el-dialog__header{
				text-align: center;
				.el-dialog__title{
					font-size: 0.2rem;
					font-weight: bold;
				}
			}
			.el-dialog__body{
				padding: 0.1rem 0.5rem !important;
				font-size: 0.18rem !important;
				.el-row{
					margin-top: 0.05rem;
					text-align: center;
				}
			}
			.el-dialog__footer{
				text-align: center !important;
			}
		}
	}
	.box-coursemodal{
		position: fixed;
		pointer-events: none;
		left: 2.1rem;
		top:0.8rem;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
		z-index: 10;
		display: none;
		.box-coursehover{
			position:fixed;
			height: 1.8rem;
			width: 3rem;
			pointer-events: auto;
			.clickItem{
				border-left:0.05rem solid;
				width: 100%;
				height: 100%;
				// margin-left: 0.04rem;
				// margin-right: 0.04rem;
				display: flex;
				flex-direction: column;
				font-size: 0.14rem;
				overflow: scroll;
				border-radius: 0.04rem;
				// text-indent: 0.1rem;
				padding: 0.1rem 0.08rem;
				.box_index {
					position: absolute;
					font-weight: bold;
					top: 0.1rem;
					right: 0.2rem;
					color: #666666;
				}
				.classname{
					// font-weight: 600;
					pointer-events: none;
				}
				.courseName{
					pointer-events: none;
				}
				.teacherName{
					pointer-events: none;
				}
				.time{
					pointer-events: none;
				}
				.classroom{
					pointer-events: none;
				}
				.gotoclassButton,.seePlaybackButton,.gotoForeignClass,.gotoNativeClass{
					color: blue;
					width: 1rem;
					text-decoration: underline;
				}
				.gotoclassButtonMonth,.seePlaybackButtonMonth{
					color: blue;
					width: 1rem;
					text-decoration: underline;
				}
				.errorRow{
					// display: flex;
					// flex-direction: column;
					height: 100%;
					border: 0.01rem red dashed;
				}
			}
			.clickItem.gray{
				border-left:0rem solid;
				background-color: rgb(240,241,246);
				color: rgb(85,85,85);
				background-image: repeating-linear-gradient(-45deg, rgb(238, 241, 246) 20px, rgb(247,248,252) 20px,
					rgb(247,248,252) 40px, rgb(238, 241, 246) 40px, rgb(238, 241, 246) 60px);
			}
			.clickItem.blue{
				border-color: rgb(82,192,255);
				background-color: rgb(228,245,255);
				color: rgb(82,192,255);
			}
			.clickItem.yellow{
				border-color: rgb(254,184,89);
				background-color: rgb(255,244,230);
				color: rgb(254,184,89);
			}
			.clickItem.red{
				border-color: rgb(254,130,140);
				background-color: rgb(255,229,232);
				color: rgb(254,130,140);
			}
			.clickItem.errorRow{
				// margin-left: 0.2rem;
				border-color: rgb(254,130,140);
				background-color: rgb(255,229,232);
				color: rgb(254,130,140);
			}
			.clickItem.errorClo{
				// margin-left: 0.2rem;
				border-color: rgb(254,130,140);
				background-color: rgb(255,229,232);
				color: rgb(254,130,140);
			}
			// 滚动条
			.clickItem::-webkit-scrollbar {
				width: 0;
				height: 0;
			}
			.clickItem:hover{
				cursor: pointer;
			}

		}
	}
	.box-courseListModal{
		position: fixed;
		// pointer-events: none;
		left: 2.1rem;
		top:0.8rem;
		width: calc( 100% - 2.1rem );
		height: calc( 100% - 0.8rem );
		background-color: rgba(0, 0, 0, 0.2);
		z-index: 10;
		display: none;
		justify-content: center;
		align-items: center;
		.close-courseListModal{
			// position: absolute;
      float: left;
      width: 100%;
      text-align: right;
			font-size: 0.28rem;
			font-weight: bold;
			color: #666666;
			// cursor: pointer;
			// right: 3.6rem;
      // top: 0.3rem;
			z-index: 11;
      .el-icon-close:hover{
        cursor: pointer;
        color: #3885f8;
      }
		}
		.box-courseListHover{
			position:relative;
			max-height: 8rem;
			width: 10rem;
			pointer-events: auto;
			background-color: white;
			// border: 0.01rem solid #ededed;
			border-radius: 0.1rem;
			padding: 0.16rem;
			// padding-top: 0.4rem;
			color: #666666;
			overflow-x: hidden;
			overflow-y: auto;
			.clickItem{
				border-left:0.05rem solid;
				width: 3rem;
				height: 1.8rem;
				display: flex;
				flex-direction: column;
				font-size: 0.14rem;
				overflow: scroll;
				border-radius: 0.04rem;
				padding: 0.1rem 0.08rem;
				float: left;
				margin: 0.1rem;
				.box_index {
					position: absolute;
					font-weight: bold;
					top: 0.1rem;
					right: 0.2rem;
					color: #666666;
				}
				.classname{
					// font-weight: 600;
					pointer-events: none;
				}
				.courseName{
					pointer-events: none;
				}
				.teacherName{
					pointer-events: none;
				}
				.time{
					pointer-events: none;
				}
				.classroom{
					pointer-events: none;
				}
				.btn{
					color: blue;
					width: 1rem;
					text-decoration: underline;
				}
				.gotoclassButtonMonth{
					color: blue;
					width: 1rem;
					text-decoration: underline;
				}
				.errorRow{
					// display: flex;
					// flex-direction: column;
					height: 100%;
					border: 0.01rem red dashed;
				}
			}
			.clickItem.gray{
				border-left:0rem solid;
				background-color: rgb(240,241,246);
				color: rgb(85,85,85);
				background-image: repeating-linear-gradient(-45deg, rgb(238, 241, 246) 20px, rgb(247,248,252) 20px,
					rgb(247,248,252) 40px, rgb(238, 241, 246) 40px, rgb(238, 241, 246) 60px);
			}
			.clickItem.blue{
				border-color: rgb(82,192,255);
				background-color: rgb(228,245,255);
				color: rgb(82,192,255);
			}
			.clickItem.yellow{
				border-color: rgb(254,184,89);
				background-color: rgb(255,244,230);
				color: rgb(254,184,89);
			}
			.clickItem.red{
				border-color: rgb(254,130,140);
				background-color: rgb(255,229,232);
				color: rgb(254,130,140);
			}
			.clickItem.errorRow{
				// margin-left: 0.2rem;
				border-color: rgb(254,130,140);
				background-color: rgb(255,229,232);
				color: rgb(254,130,140);
			}
			.clickItem.errorClo{
				// margin-left: 0.2rem;
				border-color: rgb(254,130,140);
				background-color: rgb(255,229,232);
				color: rgb(254,130,140);
			}
			// 滚动条
			.clickItem::-webkit-scrollbar {
				width: 0;
				height: 0;
			}
			.clickItem:hover{
				cursor: pointer;
			}

		}
		// 滚动条
		.box-courseListHover::-webkit-scrollbar {
			width: 0.05rem;
		}
		.box-courseListHover::-webkit-scrollbar-thumb {
			border-radius: 0.5rem;
			background: #BBBBBB;
		}
		.box-courseListHover::-webkit-scrollbar-track {
			background: #F2F6FC;
		}
	}

}
</style>
